<template>
  <div class="home">
    <van-sticky>
      <van-search
        disabled
        left-icon="none"
        shape="round"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @click="tosearch"
      >
        <template v-if="this.islogin" #action>
          <div class="btn-serch">签到</div>
        </template>
        <template v-else #action>
          <div class="btn-login">登录</div>
        </template>
      </van-search>
    </van-sticky>
    <!-- 搜索栏 -->

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerlist" :key="item.id"
        ><img :src="item.src" alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- 倒计时 -->
    <!-- 限时折扣 -->
    <keep-alive>
      <div class="content">
        <div class="row1">
          <span class="row-title">限时折扣</span>
          <span class="time"
            ><van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down></span
          >
          <span class="kong-box"></span>
          <span class="more">更多</span>
        </div>
        <div class="row1-content">
          <div class="row1-item-box">
            <div
              class="row1-item"
              v-for="item in goodsList.filter((item) => {
                return item.isdiscont == true;
              })"
              :key="item.id"
              @click="getDetail(item.id)"
            >
              <div class="imgbox">
                <img :src="item.src" alt="" />
              </div>
              <!-- <p class="name"></p> -->
              <div class="name van-multi-ellipsis--l2">
                {{ item.goodmsg }}
              </div>
              <p class="money">￥{{ item.goodprice }}</p>
              <p class="oldMoney">
                <span class="yuan">原</span>
                <span class="old">￥{{ item.goodoldprice }}</span>
              </p>
            </div>
          </div>
        </div>
        <!-- ?? -->
        <div class="row1 ttt2">
          <span class="row-title">本周爆款</span>
          <span class="more">更多</span>
        </div>
        <div class="row1-content">
          <div class="row1-item-box">
            <div
              class="row1-item"
              @click="getDetail(item.id)"
              v-for="item in goodsList.filter((item) => {
                return item.isfire == true;
              })"
              :key="item.id"
            >
              <div class="imgbox">
                <img :src="item.src" alt="" />
              </div>
              <div class="name van-multi-ellipsis--l2">
                {{ item.goodmsg }}
              </div>
              <p class="money">￥{{ item.goodprice }}</p>
              <!-- <p class="oldMoney">
              <span class="yuan">原</span>
              <span class="old">￥{{ item.goodoldprice }}</span>
            </p> -->
            </div>
          </div>
        </div>
        <!--  -->
        <div class="row1 ttt2">
          <span class="row-title">为你推荐</span>
          <span class="more">更多</span>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="flag"
          >
            <div class="foryou-content">
              <div
                class="foryou-item"
                @click="getDetail(item.id)"
                v-for="item in goodsList11"
                :key="item.id"
              >
                <div class="imgbox">
                  <img :src="item.src" alt="" />
                </div>
                <div class="msg van-multi-ellipsis--l2">
                  {{ item.goodmsg }}
                </div>
                <!-- <div class="msg"></div> -->
                <div class="price">￥{{ item.goodprice }}</div>
              </div>
              <!-- /// -->
            </div>
          </van-list>
        </van-pull-refresh>
        <!--  -->
      </div>
    </keep-alive>
  </div>
</template>
<style   lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-search__action {
  height: 30px;
  width: 60px;
  border-radius: 990px;
  border: 1px solid #c0aa95;
}
.van-search__action div {
  line-height: 30px;
  /* color: #c0aa95; */
}
.van-search__content {
  border-radius: 99px;
}
.van-search {
  box-sizing: content-box;
  padding-top: 20px;
  padding: 20px 10px 10px;
}
.van-cell__value {
  /* background-color: #eae9e5; */
}
.van-swipe-item {
  width: 100vw;
  height: 260px;
}
.van-swipe-item img {
  width: 100%;
  height: auto;
}
.content {
  background-color: #c1ab96;
  padding: 15px;
  padding-top: 25px;
}
.content .row1 {
  display: flex;
  justify-content: space-between;
  /* width: max-content; */
  font-size: 16px;
  color: white;
  font-weight: 700;
  .kong-box {
    width: 100px;
  }
}
.content .time {
  text-align: left;
  // margin-left: 20px;
}
.row-title {
  padding-right: 10px;
}

/* 倒计时 */
.colon {
  display: inline-block;
  margin: 0 4px;
  color: black;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: black;
}
/*  */
.row1-content {
  padding: 10px;
  margin-top: 15px;
  background-color: #fff;
  // height: 190px;
  border-radius: 10px;
}
.row1-content .imgbox {
  width: 100px;
  height: 100px;
  overflow: hidden;
  padding-left: 3px;
}
.imgbox img {
  width: 100px;
  border-radius: 5px;
}
.row1-item-box {
  display: flex;
  // padding: 10px;
}
// .row1-item {
//   // width: 100px;
//   width: 50%;
// }
.row1-item p {
  width: 86px;
  text-align: left;
  font-size: 14px;
}
.row1-item .money {
  font-weight: 700;
  color: #c1ab96;
  line-height: 25px;
}
.row1-item .yuan {
  background-color: black;
  color: #fff;
  padding: 2px;
}
.row1-item .old {
  text-decoration: line-through;
}
.row1-content {
  width: 100%;
  .row1-item-box {
    overflow-x: scroll;
  }
  .row1-item {
    margin-right: 10px;
  }
  // .row1-time {
  //   display: flex;
  // }
}
.ttt2 {
  margin-top: 20px;
}
.van-list {
  margin-bottom: 60px;
  .van-list__finished-text {
    color: white;
  }
}
.foryou-content {
  // margin-bottom: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .foryou-item {
    box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.35);
    background-color: #fff;
    width: 48%;
    margin-top: 15px;
    // width: 165px;
    // height: 260px;
    position: relative;
    .msg {
      padding: 0 10px;
      font-size: 16px;
      text-align: left;
    }
    .price {
      font-size: 16px;
      font-weight: 700;
      color: #c1ab96;
      text-align: left;
      margin-top: 10px;
      padding: 10px 10px;
      position: relative;
    }
    .imgbox {
      width: 100%;
      height: auto;
      // background-color: red;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.btn-login,
.btn-serch {
  text-align: center;
  margin-top: 0;
}
.van-cell {
  margin-top: 0;
}

.van-multi-ellipsis--l2 {
  padding: 0 5px 0 0;
}
</style>

<script>
import homeModel from "../model/homeModel";
import { mapActions, mapState } from "vuex";
import goodsModel from "../model/goodsModel";
export default {
  data() {
    return {
      islogin: false,
      value: "",
      bannerlist: [],
      // goodslist: [],
      firelist: [],
      discountlist: [],
      time: 30 * 60 * 60 * 1000,
      pageSize: 0,
      skipnum: 5,
      goodsList11: [],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      flag: false,
    };
  },

  computed: {
    ...mapState(["goodsList"]),
  },

  created() {
    //这是异步的vuex
    // this.changeLoginFlag;
    if (localStorage.getItem("username")) {
      this.islogin = true;
      console.log(111);
    } else {
      this.islogin = false;
      console.log(222);
    }
    if (!this.goodsList.length) {
      this.asyncInitGoodsList();
    }
    // this.firelist = this.goodsList.filter((item) => {
    //   return item.isfire == true;
    // });

    homeModel.bannerList().then((res) => {
      // console.log(res.data);
      this.bannerlist = res.data;
    });
    this.getBookList();
  },
  mounted() {},
  methods: {
    ...mapActions(["asyncInitGoodsList"]),
    getDetail(id) {
      this.$router.history.push({
        name: "detail",
        params: { id },
      });
    },
    tosearch() {
      this.$router.history.push("/searchto");
    },
    getBookList() {
      goodsModel.query().then((res) => {
        let t = this.pageSize;
        // console.log(t);
        if (this.pageSize + this.skipnum <= res.data.length) {
          for (t; t < this.pageSize + this.skipnum; t++) {
            this.goodsList11.push(res.data[t]);
            // console.log(t);
          }
        } else {
          for (t; t < res.data.length; t++) {
            this.goodsList11.push(res.data[t]);
            // console.log(t);
            this.loading = false;
          }
          this.finished = true;
        }
        this.pageSize = this.pageSize + this.skipnum;
        // console.log(this.pageSize);
        // this.total = res.data.total;
        // console.log(this.goodsList, "first");
      });
    },
    onLoad() {
      //上拉  加载数据
      setTimeout(() => {
        this.getBookList();
        this.loading = false; //表示后面 碰到了底部 还可以请求数据  不然只能请求一次
      }, 2000);

      // let endDate = new Date("2021-1-29 0:0:0");
      // let nowDate = new Date();
      // this.time = endDate - nowDate;
      // console.log(this.time);
    },
    onRefresh() {
      //下拉刷新数据  最新的第一条数据
      console.log("abc");
      this.goodsList11 = []; //快速清空 集合
      this.pageSize = 0;
      this.skipnum = 5;
      this.finished = false;
      this.loading = true;
      this.onLoad();
      this.refreshing = false; //上面的正在加载会一直存在
    },
  },
};
</script>